<template>
  <div class="gray-page cockpit-detail-page">
    <nav-bar :title="title"></nav-bar>
    <div class="list-main page-main">
      <div class="cockpit-detail-main page-main">
        <van-sticky class="page-scroll" :offset-top="20">
          <van-form input-align="right" :label-width="120">
            <van-collapse v-model="activeNames" :border="false">
              <van-collapse-item size="large" title="督办记录" name="1">
                <div v-for="(item, index) in eventsupervision" :key="index">
                  <van-field readonly label-class="van-cell__title_gray" v-model="item.visitUser" label="督办人" />
                  <van-field readonly label-class="van-cell__title_gray" v-model="item.visitRecord" label="督办意见" />
                  <van-field
                    readonly
                    label-class="van-cell__title_gray"
                    v-model="superviseReplyDate"
                    label="答复天数"
                  />
                  <van-field readonly label-class="van-cell__title_gray" v-model="item.visitTime" label="督办时间" />
                </div>
                <div v-if="superviseType === '1'">
                  <div v-for="(item, index) in supervisorreply" :key="index">
                    <van-field readonly label-class="van-cell__title_gray" v-model="item.visitUser" label="回复人" />
                    <van-field
                      readonly
                      label-class="van-cell__title_gray"
                      v-model="item.visitRecord"
                      label="回复内容"
                    />
                    <van-field readonly label-class="van-cell__title_gray" v-model="item.visitTime" label="回复时间" />
                  </div>
                </div>
                <div v-if="superviseType === '0'" class="cancel-supervision" @click="cancel">取消督办</div>
                <div v-if="superviseType === ''" class="cancel-supervision" @click="superviseagain">再次督办</div>
                <div class="hiddren"></div>
              </van-collapse-item>
              <van-collapse-item size="large" title="事件详情" name="2">
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.reportTime"
                  label="上报时间"
                />
                <van-cell
                  title="事件点位"
                  :value="formParams.communityRegionName"
                  title-class="van-cell__title_gray"
                  value-class="van-cell__value_black"
                />
                <van-cell
                  title="事件分类"
                  :value="formParams.eventTypeName"
                  title-class="van-cell__title_gray"
                  value-class="van-cell__value_black"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.eventScaleName"
                  class="unsupervise-eventscale"
                  label="事件规模"
                />
                <van-cell title="事件描述" title-class="van-cell__title_gray" :border="false" />
                <van-field
                  readonly
                  v-model="formParams.eventDescription"
                  rows="5"
                  autosize
                  type="textarea"
                  :border="false"
                  class="van-field__value--textarea-lightgray vant-left"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.overTime"
                  class="unsupervise-overTime"
                  label="要求时限"
                />
                <template v-if="fileList.length">
                  <van-cell title="添加图片/视频" title-class="van-cell__title_gray" :border="false" />
                  <van-field class="van-field__value--upload">
                    <template #input>
                      <van-uploader
                        name="fileList"
                        v-model="fileList"
                        :show-upload="false"
                        :deletable="false"
                        @click-preview="previewClick"
                      >
                        <template #preview-cover="file">
                          <template v-if="format.includes(file.url.split('.')[file.url.split('.').length - 1])">
                            <div class="van-uploader__preview-masker"></div>
                            <video-player
                              class="video-player vjs-custom-skin"
                              :playsinline="true"
                              :options="{
                                aspectRatio: '16:16',
                                preload: 'auto',
                                sources: [
                                  {
                                    src: file.url
                                  }
                                ]
                              }"
                            ></video-player>
                          </template>
                        </template>
                      </van-uploader>
                    </template>
                  </van-field>
                </template>
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  class="unsupervise-overTime"
                  v-model="formParams.eventStatusName"
                  label="处置状态"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.eventOriginName"
                  label="上报来源"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  v-model="formParams.reportPerson"
                  label="上报人"
                />
              </van-collapse-item>
              <van-collapse-item size="large" title="流转详情" name="3">
                <div class="unsupervise-time" v-if="hisList.length">
                  <ul id="timeline">
                    <li class="work" v-for="(item, index) in hisList" :key="index">
                      <div class="relative">
                        <span class="date">
                          <span>{{ item.startTime.split(' ')[1] }}</span>
                          <p>{{ item.startTime.split(' ')[0] }}</p>
                        </span>
                        <span class="circle"></span>
                      </div>
                      <div class="content">
                        <div class="content-box">
                          <div class="content-box-left">
                            <p class="content-box-name">{{ item.activityName }}</p>
                            <div v-for="(info, index) in item.comment" :key="index">
                              <p v-if="info.commentLevel === '1'" style="color: #3cbdd0">{{ info.visitRecord }}</p>
                              <p v-if="info.commentLevel === '2'">{{ info.visitRecord }}</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </van-collapse-item>
            </van-collapse>
            <div style="padding: 16px"></div>
          </van-form>
        </van-sticky>
      </div>
    </div>
  </div>
</template>

<script>
import Cockpit from '@/api/cockpit'
export default {
  name: 'unsupervise',
  data() {
    return {
      title: '详情',
      activeNames: ['1', '2', '3'],
      formParams: {},
      searchForm: {
        recordType: '1',
        baseType: '1'
      },
      uploadKeys: [
        'firstImageUrl',
        'secondImageUrl',
        'thirdImageUrl',
        'fourthImageUrl',
        'fifthImageUrl',
        'sixthImageUrl',
        'seventhImageUrl',
        'eighthImageUrl',
        'ninthImageUrl'
      ],
      // 文件后缀
      accept: ['jpg', 'jpeg', 'png', 'mp4', 'avi', 'mov'],
      // 视频后缀
      format: ['mp4', 'avi', 'mov'],
      // 视频弹窗
      videoPopupShow: false,
      videoUrl: '',
      // 禁止多次点击
      buttonDisabled: false,
      // 处置/退回参数
      statusParams: {
        eventCode: '',
        eventOrigin: '',
        nextPerson: '',
        assignee: '',
        acceptance: '',
        comment: ''
      },
      fileList: [],
      superCode: '',
      superviseDetailDate: {},
      superviseReplyDate: '',
      hisList: [],
      eventsupervision: [],
      supervisorreply: [],
      superviseType: '',
      cancelserchform: {
        recordType: 2,
        button: 3,
        eventCode: this.$route.query.eventCode,
        superviseReplyDate: '',
        visitRecord: '',
        isShortNote: ''
      }
    }
  },
  created() {
    this.superCode = this.$route.query.eventCode
    this.superviseType = this.$route.query.type
    this.detail()
    this.superviseDetail()
    console.log(this.superviseType)
  },
  methods: {
    detail() {
      Cockpit.Record.detail({ eventCode: this.$route.query.eventCode }).then(res => {
        this.formParams = res.data.data
        this.hisList = res.data.data.hisList
        const { data } = res.data
        this.eventData = { ...data }
        this.fileList = []
        for (let i = 0; i < this.uploadKeys.length; i++) {
          if (this.eventData[this.uploadKeys[i]]) {
            this.fileList.push({
              url: this.$config.ImageURl + this.eventData[this.uploadKeys[i]]
            })
          }
        }
      })
    },
    // 视频预览
    previewClick({ file }, detail) {
      const urlArr = this.fileList[detail.index].url.split('.')
      const suffix = urlArr[urlArr.length - 1]
      if (this.format.includes(suffix)) {
        this.videoPopupShow = true
        this.videoUrl = this.fileList[detail.index].url
      }
    },
    // 督办详情
    superviseDetail() {
      Cockpit.Online.superviseDetail({ eventCode: this.$route.query.eventCode }).then(res => {
        const data = { ...res.data }
        if (data.status === 0) {
          this.superviseReplyDate = data.data.superviseReplyDate + '天'
          this.superviseDetailDate = data.data.detail
          const temp = this.superviseDetailDate
          for (var i = 0; i < temp.length; i = i + 2) {
            if (temp[i].visitRecord === '事件督办') {
              this.eventsupervision.push(temp[i + 1])
            } else if (temp[i].visitRecord === '督办回复') {
              this.supervisorreply.push(temp[i + 1])
            }
          }
        } else {
          this.$toast(data.message)
        }
      })
    },
    // 取消督办
    cancel() {
      this.$dialog
        .confirm({
          title: '',
          message: '确定要取消督办'
        })
        .then(() => {
          Cockpit.Online.supervise(this.cancelserchform).then(res => {
            if (res.data.status === 0) {
              this.$toast.success('取消督办成功')
              this.$router.go(-1)
            } else {
              this.$toast(res.data.message)
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    // 再次督办
    superviseagain() {
      this.$router.push({
        path: '/cockpit/supervise/again',
        query: {
          eventCode: this.$route.query.eventCode
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/style/cockpit/cockpit.less';
@import '~@/assets/style/cockpit/unsupervise.less';
</style>
